<template>
	<Container>
		<view class="header">
			<view
				class="article"
				@tap="tap(item, index)"
				hover-class="touch"
				hover-stay-time="300"
				:class="{ error: chooses[index] === 'error', articleLight: chooses[index] === 'select' }"
				v-for="(item, index) in assignment.optionArticles"
				:key="index"
			>
				<image class="image" :src="item.imageUrl" mode="aspectFit"></image>
			</view>
			<AudioIcon @iconTap="iconTap" :questionPress="questionPress" />
			<image
				v-if="isPoint"
				class="pointTouch img"
				:class="{ pointAnimation: pointAnimation }"
				:style="{ top: pointTouch[pointCurrent] }"
				src="../../../static/pointTouch.png"
				mode="widthFix"
			></image>
		</view>
		<Question :question="assignment.questionName" />
	</Container>
</template>

<script>
import { mixins } from '../../../common/mixins/assignmentDefault.js'
import Question from '../questionName.vue'
import AudioIcon from '../audioIcon.vue'
import Container from '../container.vue'
export default {
	mixins: [mixins],
	components: { Question, AudioIcon, Container },
	data() {
		return {
			tapNumber: 0,
			pointCurrent: -1,
			pointTouch: ['28%', '56%', '84%'],
			isPoint: true,
			interval: null,
			pointAnimation: false
		}
	},
	methods: {
		questionPlay: function() {
			if (this.isPoint) {
				setTimeout(() => {
					this.pointAnimation = true
				}, 400)
				this.pointCurrent = 0
				this.textAudio(this.pointCurrent)
				this.interval = setInterval(() => {
					if (this.pointCurrent === this.assignment.optionArticles.length - 1) {
						clearInterval(this.interval)
						this.isPoint = false
						this.questionPlay()
						return
					}
					this.pointCurrent++
					this.textAudio(this.pointCurrent)
					this.pointAnimation = false
					const timer = setTimeout(() => {
						this.pointAnimation = true
					}, 400)
					this.$once('hook:beforeDestory', function() {
						clearTimeout(timer)
					})
				}, 1800)
			} else {
				clearInterval(this.interval)
				this.pointCurrent = -1
				this.questionAudio()
			}
		},
		questionAudio: async function() {
			const text = this.assignment.questionNameForAudio ? this.assignment.questionNameForAudio : this.assignment.questionName
			const data = await this.parseTextAudio({
				text: text,
				speaker: this.assignment.audioSpeaker ? this.assignment.audioSpeaker : null
			})
			this.dialogueAudio({
				src: data,
				start: () => {
					this.questionPress = true
				},
				end: () => {
					this.questionPress = false
				}
			})
		},
		tap: function(item, index) {
			if (this.isPoint) return
			if (this.questionPress) return
			this.textAudio(index)
			if (this.tapNumber === this.assignment.optionArticles[index].serialIndex) {
				this.optionStatus('select', index)
				this.tapNumber++
				if (this.tapNumber === this.assignment.optionArticles.length) {
					this.$parent.next({
						isSure: true
					})
				}
			} else {
				this.optionStatus('error', index)
				this.$parent.next({
					isSure: false
				})
			}
		},
		textAudio: async function(current) {
			const data = await this.parseTextAudio({
				text: this.assignment.optionArticles[current].audioText
			})
			this.dialogueAudio({
				src: data
			})
		}
	}
}
</script>

<style scoped lang="stylus">
.header
	height 65vh
	width 720rpx
	border-radius 70rpx
	background white
	border 12rpx solid #FCC77D
	box-sizing border-box
	margin 1.5vh 0 5vh 0
	display flex
	align-items center
	flex-direction column
	position relative
	perspective 2000
	.article
		width 60%
		height 33.3%
		display flex
		justify-content center
		align-items center
		position relative
		transition all 0.3s
		.image
			width 80%
			height 80%
	.pointTouch
		position absolute
		width 80rpx
		top 130%
		left 45%
		transition all 0.4s
.pointAnimation
	animation pointAnimation 0.5s
@keyframes pointAnimation
	0%
		transform translate3d(0, 0, 0)
	50%
		transform translate3d(0, 0, 200rpx)
	100%
		transform translate3d(0, 0, 0)
</style>
